<template>
  <div>
    <!-- table:表格对应的数据 -->
    <!-- row-key="id":表格选择的依据,通过id选择,必填项 -->
    <!-- default-expand-all:自动展开数据 -->
    <!-- tree-props:属性数据的属性 -->
    <!-- 1.引入表格和创建依赖数据 -->
    <!-- 4.改变表格对应的字段值 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="ID" sortable width="80">
      </el-table-column>
      <el-table-column prop="title" label="标题" sortable width="120">
      </el-table-column>
      <!-- 5.针对某些需要改变的部分进行优化 -->
      <!-- 5.1 状态的文字和样式需要改变 -->
      <!-- 5.2 需要对变量进行展示，并且需要不同的样式，所以使用作用域插槽 -->
      <el-table-column prop="type" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1" type="success">目录</el-tag>
          <el-tag v-else type="danger">菜单</el-tag>
          <!-- {{ scope.row }} -->
          <!-- {{ scope.row }} 是作用域接收的全部数据-->
        </template>
      </el-table-column>
      <!-- 图标 -->
      <el-table-column prop="icon" label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <!-- 地址 -->
      <el-table-column prop="url" label="地址"></el-table-column>
      <!-- 操作 -->
      <!-- 6.对需要操作的元素添加点击事件，判断的值可以使用插槽中的id,主要是根据接口需要的值 -->
      <el-table-column prop="icon" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/* 2. 导入请求接口 */
/* 2. 菜单列表数据接口、删除菜单接口 */
import { menuListTree, meunListDel } from "../../api.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  /* 3.第一时间获取请求的数据进行赋值渲染 */
  created() {
    /* 3.1优化结构，调用methods中的函数进行请求 */
    this.getMenu();
  },
  /* 3.2 在methods中创建async函数进行请求，在钩子函数中调用*/
  methods: {
    async getMenu() {
      let res = await menuListTree();
      /* 3.3 将响应的结果赋值给组件依赖的值 */
      this.tableData = res.list;
      // console.log(res, "本次响应的结果");
    },
    /* 8.编辑功能 */
    /* list子->index父元素->info子元素 */
    edit(info) {
      // console.log(info);
      /* 8.1让修改弹窗显示，通过子传父方法改变父元素中的值,info是该节点的所有值 */
      /* 8.3 子元素通过this.$emit的方法修改父元素的值，('方法名',要传递的变量) */
      this.$emit('edit',info)
    },
    /* 7.删除功能 */
    del(id) {
      // console.log(id);
      /* 7.1二次确认弹窗,再点击前再出现一个弹窗进行确认 */
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //7.3确认删除走then分支
        .then(async () => {
          /* 7.4导入接口，传入必要的参数id */
          let res = await meunListDel(id);
          /* 7.5 将返回的新数据直接赋值给表格,减少一次请求，直接更新数据 */
          this.tableData = res.list;
          /* 7.6对删除状态进行提示 */
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
        //7.4取消删除走.catch分支
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
</style>